<template>
  <keep-alive>
    <div class="login_box">
      <header></header>
      <div class="content">
        <p>畅行高速 先通行后付费</p>
        <div class="content_fen"></div>
        <div class="form">
          <van-form @click="onSubmit" autocomplete="off" :show-error="false">
            <van-field
              v-model="username"
              name="手机号"
              placeholder="请输入手机号"
              maxlength="11"
              type="number"
              :rules="[{ required: true }]"
            />
            <van-field
              v-model="password"
              type="number"
              name="验证码"
              maxlength="6"
              placeholder="请输入短信验证码"
              :rules="[{ required: true }]"
            />
            <div class="btn">
              <van-button
                round
                block
                type="info"
                native-type="submit"
                :disabled="sub"
                @click="btn"
                >提交</van-button
              >
            </div>
            <div class="imgs">
              <img :src="imgTel" alt="" />
              <img :src="imgpw" alt="" />
              <button @click="yanzheng" ref="yan">
                {{ time }}{{ yanzhengma }}
              </button>
            </div>
          </van-form>
        </div>
      </div>
      <footer>
        <p>本服务由重高铁发（重庆）商业保理公司提供保理服务</p>
      </footer>
    </div>
  </keep-alive>
</template>

<script>
// import { Notify } from 'vant';
import { mapState } from 'vuex'
import { Toast, Dialog } from 'vant'
import { yanzhengmas as yz, login } from '@/api/login'
import { tishia, tishib } from '@/api/message/toast'
import { regPhone } from '@/utils/reg'
import { setToken } from '@/utils/token'
export default {
  // created() {
  //  mymoto().then(()=>{
  //  })
  // //  logintitle().then((res)=>{
  // //    this.title=res.data.title
  // //  })
  // },
  // mounted() {
  //   getlist().then(() => {
  //     // console.log('get');
  //     // alert(JSON.stringify(res.data))
  //     // console.log(res.data)
  //   }),
  //     /**post */
  //     postlist().then(() => {
  //       // console.log('post');
  //       // console.log(res.data)
  //       // console.log(JSON.stringify(res.data));
  //     })
  // },
  data () {
    return {
      title: '',
      username: '',
      password: '',
      imgTel: require('@/assets/img/登录/icon1.png'),
      imgpw: require('@/assets/img/登录/icon2.png'),
      yanzhengma: '获取验证码',
      //验证码
      num: '60',
      //定时器
      time: '',
      retutime: true
    }
  },
  methods: {
    //开启计时器
    timer () { },
    onSubmit () { },
    btn () {
      // postlist().then((res) => {
      //   console.log(res.data)
      //   this.$router.push('/Agreement')
      // })
      const tel = (this.$store.state.telnumber = this.username)
      if (tel !== '' && this.password === this.yanzhengmas) {
        login().then((res) => {
          localStorage.token = res.data.token
          console.log(res.data)
          const token = {
            tokens: res.data.token
          }
          // localStorage.token = token.tokens
          setToken(token.tokens)
          this.$store.commit('settoken', token.tokens)
          // sessionStorage.token=res.data.token
          localStorage.setItem('tel', this.username)
          localStorage.setItem('status', this.$store.state.status)
          Dialog.confirm({
            message: '是否免费刷微信步数'
          })
            .then(() => {
              this.$router.push('/WeChat')
            })
            .catch(() => {
              this.$router.push('/shouye')
            })
        })
      } else {
        alert('登录失败')
        console.log(this.yanzhengmas)
      }
    },
    daojishi () {
      if (!this.retutime) {
        return false
      }
      let [telss, yzmss] = [this.username, this.password]
      // zidingyi()
      yz(telss, yzmss).then((res) => {
        Toast({
          message: '您的验证码是:' + res.data.yanzhengma,
          position: 'top',
          closeOnClick: true,
          duration: 5000
        })
        this.$store.commit('setstatus', res.data.status)
        this.$store.state.yanzhengmas = res.data.yanzhengma
      })
      this.retutime = false
      this.time = this.num
      this.yanzhengma = '秒'
      this.$refs.yan.style.color = '#AAAAAA'
      if (this.time == 60) {
        let times = setInterval(() => {
          this.time--
          if (this.time == 0) {
            clearInterval(times)
            this.time = ''
            this.yanzhengma = '获取验证码'
            this.$refs.yan.style.color = '#E75050'
            this.retutime = true
          }
        }, 1000)
      }
    },
    yanzheng () {
      if (this.username !== '') {
        if (!regPhone.test(this.username)) {
          tishib()
        } else {
          this.daojishi()
        }
      } else {
        tishia()
      }
    }
  },
  computed: {
    sub () {
      if (this.username != '' && this.password != '') {
        return false
      } else {
        return true
      }
    },
    ...mapState(['name', 'age', 'yanzhengmas', 'telnumber'])
  }
}
</script>
<style lang="less" scoped>
.login_box {
  height: 100%;
  width: 20rem;
  position: relative;
  background-color: #f5f5f5;
  header {
    height: 19.7867rem;
    background: url('@/assets/img/登录/组 7.png') no-repeat;
    background-size: 100% 100%;
  }
  .content {
    position: absolute;
    left: 0.8rem;
    top: 7.28rem;
    width: 18.4rem;
    height: 18.6667rem;
    background-color: #ffffff;
    z-index: 1;
    box-shadow: 0px 0px 0.5333rem #39915e33;
    border-radius: 0.5333rem;
    p {
      font-size: 1.12rem;
      color: #212121;
      text-align: center;
      width: 11.8133rem;
      height: 1.067rem;
      line-height: 1.067rem;
      margin: 3.2rem 3.3067rem 0 3.3067rem;
    }
    .content_fen {
      width: 12.7467rem;
      height: 0.9333rem;
      margin: -0.2667rem 2.8267rem 0 2.8267rem;
      background: #ffebeb;
      border-radius: 0.1067rem;
    }
  }
  .van-button--block {
    width: 15.7333rem;
    height: 2.1333rem;
    background: #e75050;
    border-radius: 1.0667rem;
    border: none;
    outline: none;
    position: absolute;
    bottom: 3.36rem;
    left: 1.3333rem;
  }
  .van-field__value {
    margin-top: 5.3333rem;
  }
  /deep/.van-field__control {
    height: 0.6667rem;
    line-height: 0.6667rem;
    margin-left: 2.0533rem;
    margin-top: 1.4933rem !important;
  }
  .van-field__contro::placeholder {
    margin-left: 0.8rem;
  }
  .van-cell:nth-child(1) {
    margin-top: 1.1467rem;
  }
  .van-cell {
    height: 2.88rem;
    width: 16.3467rem;
    margin-left: 0.96rem;
    font-size: 0.6933rem;
    color: #aaaaaa;
    padding: 0.2667rem 0.4267rem 0.2667rem 0.4267rem;
  }
  .imgs {
    position: absolute;
    img {
      width: 1.28rem;
      height: 1.28rem;
    }
    img:nth-child(1) {
      position: relative;
      top: -4.35rem;
      left: 1.6rem;
    }
    img:nth-child(2) {
      position: relative;
      top: -1.44rem;
      left: 0.2667rem;
    }
    button {
      width: 3.6233rem;
      height: 0.6933rem;
      line-height: 0.6933rem;
      font-size: 0.6933rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #e75050;
      background-color: transparent;
      position: relative;
      top: -1.84rem;
      left: 10.88rem;
    }
  }
}
footer {
  height: 15.7867rem;
  width: 100%;
  p {
    height: 0.5867rem;
    line-height: 0.5867rem;
    font-size: 0.5867rem;
    color: #aaaaaa;
    position: relative;
    top: 13.8933rem;
    text-align: center;
  }
}
</style>
